<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>{{.WEBSITE}}</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- ����3��meta��ǩ*����*������ǰ�棬�κ��������ݶ�*����*������� -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="/static/favicon.ico">

    <script type="text/javascript" src="/static/public/jquery-2.0.0.min.js"></script>
    <!-- Bootstrap core CSS 修改了bootstrap.min.css源文件里的pre-scrollable(垂直滚动条)部分，改高度340为800px-->

    <link href="/static/bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet">
    <script type="text/javascript" src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/1.5.7/skins/default/index.css" />
    <script src="/static/aliyun/prism-min.js"></script>
    <style type="text/css">
        .div_center {
            margin-left: auto;
            margin-right: auto;
            width: 1000px;
            /*必须要设置宽度才能够居中*/
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row clearfix vertical-middle-sm">
            <!-- text-center-->
            <div class="col-md-2 column">
                <img width="150px" height="150px" src="/static/img/ccnu1.png" />
            </div>
            <div class="col-md-4 column text-left" style="vertical-align: middle !important;">
                <H1><span>直播测试</span></H1>
            </div>
            <div class="col-md-5 column">

            </div>

        </div>
        <hr/>
    </div>
    <div class="container">
        <div class="row clearfix">
            <!--div id="toolbar" class="btn-group" onclick="fullscreen()">
                <button id="btn_add" type="button" class="btn btn-default">
					<span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>全屏播放
				</button>
            </div-->
            <div id="toolbar" class="btn-group">
                <button id="btn_play" type="button" class="btn btn-default">
					<span class="glyphicon glyphicon-play" aria-hidden="true"></span>播放
				</button>
            </div>
            <!--div id="toolbar" class="btn-group">
                <button id="btn_pause" type="button" class="btn btn-default">
					<span class="glyphicon glyphicon-pause" aria-hidden="true"></span>暂停
				</button>
            </div>
            <div id="toolbar" class="btn-group">
                <button id="btn_stop" type="button" class="btn btn-default">
					<span class="glyphicon glyphicon-stop" aria-hidden="true"></span>停止
				</button>
            </div-->
            <div id="toolbar" class="btn-group" onclick="dcewm">
                <button id="btn_scewm" type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">
					<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>手机播放二维码
				</button>
            </div>

            <!--div id="toolbar" class="btn-group" onclick="">
                <button id="btn_add" type="button" class="btn btn-default">
					<span class="glyphicon glyphicon-hd-video" aria-hidden="true"></span>高清
				</button>
            </div>
            <div id="toolbar" class="btn-group" onclick="">
                <button id="btn_add" type="button" class="btn btn-default">
					<span class="glyphicon glyphicon-sd-video" aria-hidden="true"></span>标清
				</button>
            </div-->
        </div>
    </div>
    <div style="height:10px;"></div>
    <div class="container">
        <div class="row clearfix">
            <div class="div_center">
                <div id="J_prismPlayer" class="prism-player"></div>
                <!-- prism-player为h5播放器皮肤的钩子类名，请务必加上 -->
                <!--button id="J_clickToPlay" type="button">播放</button-->
            </div>
        </div>
    </div>


    <!-- Modal -->
    <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">手机播放请扫码</h4>
                </div>
                <div class="modal-body">
                    <img src="/api/v1/qrcode" alt="手机播放请扫码" />
                </div>
                <div class="modal-footer">
                </div>

            </div>
        </div>
    </div>


    <hr/>
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <p class="text-center">
                    <em>Hi</em> 前台/后台： <strong>熊义</strong> ，QQ:34512664 。
                </p>
            </div>
        </div>
    </div>

    <script>
        // 初始化播放器
        var player = new prismplayer({
            id: "J_prismPlayer", // 容器id
            source: "http://l.kjdll.com/live/ccnu_hd.flv",
            //http://l.kjdll.com/live/ccnu.m3u8
            // rtmp://c.kjdll.com/live/ch1
            // 视频地址http://cloud.video.taobao.com/play/u/2554695624/p/1/e/6/t/1/fv/102/28552077.mp4
            autoplay: false, //自动播放：否
            width: "100%", // 播放器宽度
            height: "400px", // 播放器高度
            isLive: true, //是否为直播，会禁止拖动
            autoplay: true, //播放器是否自动播放，html5受浏览器限制，大多数情况下该配置会失效
            notShowTips: true, //不显示控制Tips（按钮提示）
            skinLayout: false, //功能组件布局配置，不传该字段使用默认布局，传false隐藏所有功能组件
        });
        /*var clickDom = document.getElementById("J_clickToPlay");
        clickDom.addEventListener("click", function(e) {
            // 调用播放器的play方法
            player.play();
        });*/
        var btn_play = document.getElementById("btn_play");
        btn_play.addEventListener("click", function(e) {
            // 调用播放器的play方法
            player.play();
        });
        var btn_pause = document.getElementById("btn_pause");
        btn_pause.addEventListener("click", function(e) {
            // 调用播放器的pause方法
            player.pause();
        });
        // 监听播放器的pause事件
        player.on("pause", function() {
            alert("播放器暂停啦！");
        });
        player.on("ended", function() {
            //，当前视频播放完毕时触发
            alert("RTMP流断了！");
        });
        player.on("m3u8Retry", function() {
            //m3u8直播流中断后重试事件，每次断流只触发一次
            alert("RTMP流断了！");
        });
        player.on("liveStreamStop", function() {
            //liveStreamStop，直播流中断时触发,m3u8/flv/rtmp在重试5次未成功后触发，
            //提示上层流中断或需要重新加载视频(PS：m3u8一直自动重试，不需要上层添加重试)
            //调用loadByUrl(url,time)，直接播放视频url，time为可选值（单位秒）目前只支持同种格式（mp4/flv/m3u8）之间切换，暂不支持直播rtmp流切换
            alert("流断了！");

        });
    </script>

</body>

</html>